<template>
  <div class="index">

    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>

        <div style="margin: 20px;">
          <div class="kflex" style="margin-bottom: 20px;">
            <div class="navli2" @click="go('/fabuxitonggonggao')">系统公告</div>
            <div class="navli" @click="go('/fabuxitongtongzhi')">版本更新通知</div>
          </div>
          <el-button type="danger" @click="fabux">版本更新通知</el-button>
        </div>
        <div class="cons" v-loading="loading">
          <div style="width: 100%; display: flex; background: #f9f9f9; padding: 20px 0px 20px 0;">
            <div class="td" style="flex: 1;">发布时间</div>
            <div class="td" style="flex: 1;">版本号</div>
            <div class="td" style="flex: 1;">标题</div>
            <div class="td" style="flex: 1;">是否弹窗</div>
            <div class="td" style="flex: 1;"> 操作</div>
            <div style="width: 20px;"></div>
          </div>

          <el-collapse accordion @change="handleChange">
            <el-collapse-item v-for="item in list" :key="item.nu_id" :name="item.nu_id"
              v-bind:class="[item.status == 1 ? 'act' : 'no']">
              <template slot="title">

                <div style="width: 100%; display: flex;">
                  <div class="td" style="flex: 1;">{{item.created_at}}</div>
                  <div class="td" style="flex: 1;">{{item.version}}</div>
                  <div class="td" style="flex: 1;">{{item.title}}</div>
                  <div class="td" style="flex: 1;">
                    <span v-if="item.type == 3">弹窗</span>
                    <span v-if="item.type == 8">不弹窗</span>
                  </div>
                 <div class="td" style="flex: 1;">{{item.n_time}}
                  <span  @click.stop="xiugai(item.id)" style="color: #409EFF; margin: 0 20px;">修改</span>
                  <span  @click.stop="shanchu(item.id)" style="color: #409EFF; margin: 0 20px;">删除</span>
                 </div>
                </div>

              </template>
              <div v-html="item.content"></div>
              <div style="cursor: pointer; color: #409EFF;" v-if="item.file != ''" @click="down(item.file)">
                下载附件
              </div>
            </el-collapse-item>
          </el-collapse>
          <!--                    <div class="list" v-for="item in list" :key="item.id" v-bind:class="[item.status == 1 ? 'act' : 'no']" style="justify-content: space-between;">
                    	<div class="td" style="flex: 6;"><i class="el-icon-warning"></i>重要公告】消息内容消息内容消息内容</div>
                        <div class="td" style="flex: 1;">{{item.created_at}}</div>
                    	<div class="td" ><el-button type="primary" size="mini">已读</el-button></div>
                    </div> -->
          <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
            :page-size="pagesize" :total="total"></el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="发布版本更新通知" :close-on-click-modal="false" :visible.sync="log" @opened="logshow" @closed="loghide"
      width="700px">
      <div v-loading="loading">
        <div class="flex">

          <div class="f2" style="margin-bottom: 20px;">
            <el-input v-model="tongzhi.title" style="width: 660px;" placeholder="标题"></el-input>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">

          <div class="f2">
            <el-input v-model="tongzhi.version" style="width: 660px;" placeholder="版本号"></el-input>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">

          <div class="f2">
            <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" style="width: 660px;" v-model="tongzhi.online_time" type="datetime"
              placeholder="选择上线时间">
            </el-date-picker>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">

          <div class="f2">
            <div ref="editorE" style="width: 660px;">

            </div>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;">
          <div class="f2">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :http-request="ordergo" :show-file-list="false">
              <div style="line-height: 36px; color: #409EFF;">+上传文件</div>
            </el-upload>
          </div>
        </div>
        <div class="flex" style="margin-bottom: 20px;"  v-if="tongzhi.file">
          <div class="f2">
            已上传文件 <span style="margin: 0 10px; color: #409EFF;">{{this.tongzhi.file.name}}</span>
          </div>
        </div>
        <div class="flex">
          <el-checkbox v-model="checked">给用户弹窗展示</el-checkbox>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="log = false">取 消</el-button>
        <el-button type="primary" v-if="tongzhi.id == ''" :disabled='fabuzhong' @click="fabutongzhi(1)">确 定</el-button>
        <el-button type="primary" v-if="tongzhi.id != ''" :disabled='fabuzhong' @click="fabutongzhi(2)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <foot></foot> -->
  </div>
</template>

<script>
  import bus from '@/assets/bus.js'
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import E from 'wangeditor'
  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot
    },
    name: 'fabutongzhi',
    data() {
      return {
        fabuzhong:false,
        checked:false,
        tongzhi: {
          id: '',
          type: "3",
          title: "",
          content: "",
          online_time: "",
          file: "",
          version:""
          // type	int	消息类型：1 弹窗 2 普通 3 系统更新（弹窗） 4 上架 5 下架 6系统维护 8 系统更新（普通） 9 公告
          // title	string	消息标题
          // content	string	消息内容
          // version	string	版本号
          // file	file	用户说明文件
        },
        list: {},
        total: 0,
        pagesize: 20,
        page: 1,
        loading: true,
        log: false,
        editor: "",
        shopid: "",
        act:1
      }
    },
    created() {
      this.getlist()
      bus.$on('shopid', (res) => {
        this.shopid = res
      })
    },
    mounted() {

    },
    methods: {
      go:function(url){
        this.$router.push(url)
      },
      fabux:function(){
        this.tongzhi = {
            id: "",
            type: "",
            title: "",
            content: "",
            online_time: "",
            file: "",
            version:""
        }
        this.checked = false
        this.log = true
      },
      xiugai: function(id) {
        this.loading = true
        axios.get('/api/sys/notice/get/notice-info?id=' + id)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tongzhi = response.data.data
              if(this.tongzhi.type == 3){
                this.checked = true
              }else{
                this.checked = false
              }
              this.log = true
              setTimeout(() => {
                this.editor.txt.html(this.tongzhi.content)
                this.loading = false
              }, 1000)
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      shanchu:function(id){
        this.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          axios.get('/api/system/notice/del/notice?id=' + id)
            .then(response => {
              if (response.data.msg.code == 0) {
                this.getlist()
                this.$message.success('已删除');
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
        })

      },
      down: function(url) {
        const a = document.createElement('a');
        a.setAttribute('download', "");
        a.setAttribute('href', url);
        a.click();
      },
      ordergo: function(file) {
        var that = this
        this.tongzhi.file = file.file

      },
      handleChange: function(e) {
        axios.post('/api/sys/notice/set/read', {
            id: e
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      fabutongzhi: function(index) {
        let url = ""
        let zi = ''
        let data = new FormData()
        console.log(this.checked)
        if(this.checked){
          this.tongzhi.type = 3
        }else{
          this.tongzhi.type = 8
        }
        if (index == 1) {
          data.append('type', this.tongzhi.type);
          data.append('title', this.tongzhi.title);
          data.append('version', this.tongzhi.version);
          data.append('content', this.tongzhi.content);
          data.append('online_time', this.tongzhi.online_time);
          data.append('file', this.tongzhi.file);
          url = '/api/system/notice/create'
          zi = "通知已发布"
        } else {
          data.append('id', this.tongzhi.id);
          data.append('type', this.tongzhi.type);
          data.append('title', this.tongzhi.title);
          data.append('version', this.tongzhi.version);
          data.append('content', this.tongzhi.content);
          data.append('online_time', this.tongzhi.online_time);
          data.append('file', this.tongzhi.file);
          url = '/api/system/notice/update'
          zi = "通知已修改"
        }

        this.fabuzhong = true
        axios.post(url, data)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success(zi);
              this.checked = false

              this.getlist()
              this.editor.txt.clear()

              this.log = false
              setTimeout(()=>{
                this.fabuzhong = false
              },500)
            } else {
              this.$message.error(response.data.msg.info);
              this.fabuzhong = false
            }
          })

      },
      loghide: function() {
        this.editor.txt.html('')
      },
      logshow: function() {
        this.log = true
		var that = this;
        if (this.editor == "") {
          var that = this
          this.editor = new E(this.$refs.editorE);

          this.editor.customConfig.menus = [
            'fontSize',
            'link',
            'image',
            'foreColor'
          ]
          this.editor.customConfig.uploadImgServer = '/upload'
          this.editor.customConfig.showLinkImg = false
          this.editor.customConfig.onchange = function(html) {
            that.tongzhi.content = html
          }
          this.editor.customConfig.customUploadImg = function(files, insert) {
  
            var formData = new FormData();
            formData.append("pic", files[0]);
            axios.post('/api/plan-market/order-page/upload-pic', formData)
              .then(response => {
                if (response.data.msg.code == 0) {
                  insert(response.data.data)
                } else {
                  that.$message.error(response.data.msg.info);
                }
              })
          }
          this.editor.create();

          this.editor.txt.html(this.tongzhi.content)
        }

      },

      getlist: function() {
        var that = this
        axios.get('/api/system/notice/list/notice?type=1?page=' + this.page + '&page_size=' + this.pagesize)
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data.data
              that.total = response.data.data.total
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      status: function(id) {
        var that = this
        axios.post('/api/system/message/status', {
            status: 2,
            id: id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '修改状态成功！',
                type: 'success'
              });
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {
    .td{ text-align: center;}
    .navli{ border-bottom: 2px #f00 solid; margin-right: 20px; padding-bottom: 10px; cursor: pointer;}
    .navli2{ border-bottom: 2px #fff solid; margin-right: 20px; padding-bottom: 10px; cursor: pointer;}
    /deep/ .el-collapse-item__header {
      height: auto !important;
    }

    .cons {
      /deep/ .el-collapse-item__content {
        background: #f1f1f1;
        padding: 10px 20px;
      }
    }

    .flex {
      display: flex;

      .f1 {
        flex-basis: 100px;
        line-height: 36px;
        text-align: right;
        margin-right: 10px;
        margin-bottom: 20px;
      }
    }



    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      width: 640px;
    }

    .powertopli {
      flex-basis: 160px;
      line-height: 45px;
      border-top: 4px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #EAEAEA solid;
      font-size: 14px;
      text-align: center;
    }

    .powertopact {
      background: #FFFFFF;
      border-top: 4px #DD2727 solid;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #EFEFEF
    }

    .cons {

      padding: 0 20px;

      /deep/ .el-pagination {
        text-align: right;
        margin: 20px 0
      }

      .act {
        color: #000;

        /deep/ .el-icon-message-solid {
          color: #EEF7FF
        }
      }

      .no {
        color: #999;
      }
    }

  }
</style>
